#@cmsLayout()

#define cmsContent()
###文章和图集使用同一新增页面，但是使用不同的保存方法和名称，根据类型进行区分
#setLocal(pageTitle='编辑文章')
#if(artType=='2')
	#setLocal(pageTitle='编辑图集')
#end
<div class="cms-breadcrumb">
	<i class="layui-icon layui-icon-flag"></i>
	<span class="layui-breadcrumb">
	  	<a href="">文章管理</a>
	  	<a><cite>#(pageTitle)</cite></a>
	</span>
</div>

<div class="body-card layui-card">
	<form id="updateArticle" class="layui-form" action="#(ctx)/cmsArt/updateArt" method="post" onsubmit="return false;">
  		#(token)
  		<input class="layui-hide" type="text" name="id" value="#(art.id)">
  		<div class="layui-form-item">
    		<label class="layui-form-label"><span class="color-warn">*</span> 标题</label>
    		<div class="layui-input-block">
      			<input type="text" name="title" value="#(art.title)" placeholder="请输入文章标题" class="layui-input">
    		</div>
  		</div>
  		<div class="layui-form-item">
    		<label class="layui-form-label">子标题</label>
    		<div class="layui-input-block">
      			<input type="text" name="subtitle" placeholder="请输入文章子标题" value="#(art.subtitle??)" class="layui-input">
    		</div>
  		</div>
  		<div class="layui-form-item">
    		<label class="layui-form-label">摘要</label>
    		<div class="layui-input-block">
    			<textarea name="summary" placeholder="请输入文章摘要" class="layui-textarea">#(art.summary??)</textarea>
    		</div>
  		</div>
  		<div class="layui-form-item">
    		<label class="layui-form-label"><span class="color-warn">*</span> 栏目</label>
    		<div class="layui-input-inline">
      			<select name="column">
      				<option value="0">请选择文章所属栏目</option>###这个必须得有，不然页面显示会乱
				  	#for(x : artColumnsMap)
				  	<optgroup label="#(x.key)">
				  		#for(l : x.value)
				  		<option value="#(l.id)" #if(l.id==art.column) selected #end>#(l.name)</option>
				  		#end
				  	</optgroup>
				  	#end
				</select>
    		</div>
  		</div>
  		<div class="layui-form-item">
    		<label class="layui-form-label"><span class="color-warn">*</span> 文章内容</label>
    		<div class="layui-input-block">
				<textarea id="editor" name="content">#(art.content)</textarea>
    		</div>
  		</div>
  		<div class="layui-form-item">
    		<label class="layui-form-label">作者</label>
    		<div class="layui-input-inline">
      			<input type="text" name="author" placeholder="请输入文章作者" value="#(art.author??)" class="layui-input">
    		</div>
    		<div class="layui-form-mid layui-word-aux">可以手动指定在页面上显示的作者名</div>
  		</div>
  		<div class="layui-form-item">
    		<label class="layui-form-label">来源</label>
    		<div class="layui-input-inline">
      			<input type="text" name="source" placeholder="请输入文章来源" value="#(art.source??)" class="layui-input">
    		</div>
  		</div>
  		<div class="layui-form-item">
    		<label class="layui-form-label">标签</label>
    		<div class="layui-input-block">
      			<input type="text" name="tag" placeholder="请输入文章标签" value="#(art.tag??)" class="layui-input">
    		</div>
  		</div>
  		<div class="layui-form-item">
    		<label class="layui-form-label">关键字</label>
    		<div class="layui-input-block">
      			<input type="text" name="keywords" placeholder="请输入文章关键字" value="#(art.keywords??)" class="layui-input">
    		</div>
  		</div>
  		<div class="layui-form-item">
    		<label class="layui-form-label">是否置顶</label>
    		<div class="layui-input-inline">
      			<input type="checkbox" name="isTop" lay-skin="switch" lay-text="是|否" value="1" #if(art.isTop=='1') checked #end>
    		</div>
  		</div>
  		<div id="thumbnail-item" class="layui-form-item #if(!thb) layui-hide #end" pane>###已经上传的缩略图
    		<label class="layui-form-label">已传缩略图</label>
    		<div id="thumbnail-input" class="layui-input-block">
    			#if(thb)
    			<input type='checkbox' name='thumbnail' value='#(thb.id)' title='#(thb.originalName)' checked>
    			<a href="javascript:;" onclick="viewImg('#(thb.id)')" class='layui-btn layui-btn-sm'>预览</a>
    			#end
    		</div>
  		</div>
  		<div class="layui-form-item" pane>
    		<label class="layui-form-label">缩略图</label>
    		<div class="layui-input-block">
      			<button type="button" class="layui-btn layui-btn-primary" id="thumbnail">传缩略图</button>
      			<span class="layui-word-aux">每篇文章最多只能有一张缩略图，多次上传将以最后一张为准</span>
    		</div>
  		</div>
  		#if(artType=='1')
  		<div id="files-item" class="layui-form-item #if(files.size()<=0) layui-hide #end" pane>###已经上传的附件
    		<label class="layui-form-label">已传附件</label>
    		<div id="files-input" class="layui-input-block">
    			#for(f : files)
    			<input type='checkbox' name='files' value='#(f.id)' title='#(f.originalName)' checked>
    			#end
    		</div>
  		</div>
  		<div class="layui-form-item" pane>
    		<label class="layui-form-label">附件</label>
    		<div class="layui-input-block">
      			<button type="button" class="layui-btn layui-btn-primary" id="uploadFile">上传附件</button>
    			<span class="layui-word-aux">每次上传一个，多个附件需要分次长上传</span>
    		</div>
  		</div>
  		#end
  		#if(artType=='2')
  		<div id="files-item" class="layui-form-item #if(files.size()<=0) layui-hide #end" pane>###已经上传的附件
    		<label class="layui-form-label">已传图片</label>
    		<div id="files-input" class="layui-input-block">
    			#for(f : files)
    			<input type='checkbox' name='files' value='#(f.id)' title='#(f.originalName)' checked>
    			<a href="javascript:;" onclick="viewImg('#(f.id)')" class='layui-btn layui-btn-sm'>预览</a>
    			#end
    		</div>
  		</div>
  		<div class="layui-form-item" pane>
    		<label class="layui-form-label">图片</label>
    		<div class="layui-input-block">
      			<button type="button" class="layui-btn layui-btn-primary" id="uploadPic">上传图片</button>
    			<span class="layui-word-aux">支持多张图片同时上传</span>
    		</div>
  		</div>
  		#end
  		<div class="layui-form-item">
    		<div class="layui-input-block">
      			<button class="layui-btn" onclick="ajaxSaveForm('#updateArticle')">立即提交</button>
      			<a class="layui-btn layui-btn-primary" href="javascript:history.go(-1);">返回</a>
    		</div>
  		</div>
  	</form>
</div>

#@jsInit()

###TinyMCE编辑器
<script>
	//先手动销毁，避免刷新页面不能正常创建
	tinymce.remove('#editor');
	//创建tinymce
	tinymce.init({
		selector: '#editor',//textarea的选择器，建议使用id
		height: 600,//设置初始高度
		language: 'zh-Hans',//汉化语言包
		plugins: 'code lists advlist table link image media codesample charmap emoticons fullscreen',//插件
		//menubar: false,//是否显示菜单栏
		toolbar: 'blocks formatselect fontsize fontfamily bold italic underline strikethrough outdent indent lineheight forecolor backcolor link bullist numlist alignleft aligncenter alignright alignjustify ltr rtl blockquote image media table codesample subscript superscript charmap emoticons undo redo fullscreen',//工具栏
		font_family_formats: "微软雅黑=\'微软雅黑\';宋体=\'宋体\';黑体=\'黑体\';仿宋=\'仿宋\';楷体=\'楷体\';隶书=\'隶书\';幼圆=\'幼圆\';Andale Mono=andale mono,times;Arial=arial,helvetica,sans-serif;Arial Black=arial black,avant garde;Courier New=courier new,courier;Georgia=georgia,palatino;Webdings=webdings;Wingdings=wingdings",//字体选项
		image_caption: true,//是否显示图片标题
		custom_undo_redo_levels: 20,//撤销次数
		// fullscreen_native: true,//是否启用浏览器的全屏模式
		images_upload_url: '/file/uploadImg4TinyMCE',//图片上传地址
		file_picker_types: 'media',//只在视频上传时提供上传按钮
		convert_urls: false,//关闭自动转换url
		file_picker_callback: function(callback, value, meta) {
			//在视频上传弹窗提供一个文件上传按钮
			if (meta.filetype == 'media') {
				//callback('movie.mp4', {source2: 'alt.ogg', poster: 'image.jpg'});
				let filetype = '.mp4';
				let url = '/file/uploadVideo4TinyMCE';
				//模拟出一个input用于添加本地文件
				var input = document.createElement('input');
				input.setAttribute('type', 'file');
				input.setAttribute('accept', filetype);
				input.click();

				input.onchange = function () {
					let file = this.files[0];
					let xhr, formData;
					console.log(file.name);
					xhr = new XMLHttpRequest();
					xhr.withCredentials = false;
					xhr.open('POST', url);
					xhr.onload = function () {
						let json;
						if (xhr.status != 200) {
							layer.msg("文件上传异常，请检查文件格式和大小");
							return;
						}
						json = JSON.parse(xhr.responseText);
						if (!json || typeof json.location != 'string') {
							layer.msg(json.msg);
							return;
						}
						callback(json.location);
					};
					formData = new FormData();
					formData.append('file', file, file.name);
					xhr.send(formData);
				}
			}
		},
		setup: function(editor){
			//ajax提交表单自动同步textarea的问题
			editor.on('change',function(){ editor.save(); });
			//监听全屏插件的全屏事件，手动处理全屏被遮挡文档
			editor.on('FullscreenStateChanged', function(data){
				if(data.state){
					$(".layui-header").css("z-index","0");
					$(".layui-side").css("z-index","0");
				} else {
					$(".layui-header").removeAttr("style");
					$(".layui-side").removeAttr("style");
				}
			});
		}
	});
</script>

###文件上传
<script>
	var upload = layui.upload;
	//缩略图上传处理
	upload.render({
	    elem: '#thumbnail', //绑定元素
	    url: '/file/uploadThumbnail', //上传接口
	    data: {type: 'thumbnail'},//其他额外参数，此处是缩略图
	    accept: 'images', //接受上传的类型
	    acceptMime: 'image/*', //只显示图片文件
	    exts: '#(SiteInfo.thumbnailSuffix)', //允许的文件扩展名，图片是相对固定的
	    size: #(SiteInfo.imgMaxSize.toInt()*1024), //允许的大小，单位KB，使用siteInfo中的变量
	    done: function(res, index, upload){//上传接口请求成功的回调
	    	if('ok'==res.state){//后台返回成功
	    		layer.msg(res.msg);
	    		$("#thumbnail-item").removeClass("layui-hide");
	    		var html = "<input type='checkbox' name='thumbnail' value='"+res.fileId+"' title='"+res.fileName+"' checked>";
	    		html = html + "<a href='javascript:;' onclick='viewImg("+res.fileId+")' class='layui-btn layui-btn-sm'>预览</a>";
	    		$("#thumbnail-input").html(html);
	    		form.render("checkbox");
	    	} else {//后台返回失败
	    		layer.msg(res.msg);
	    	}
	    },
	    error: function(index, upload){//上传请求失败的回调
	    	layer.msg("文件上传失败");
	    }
	});
	
	// 附件上传处理
	upload.render({
	    elem: '#uploadFile', //绑定元素
	    url: '/file/uploadAnnex', //上传接口
	    data: {type: 'annex'},//其他额外参数，此处是附件
	    accept: 'file', //接受上传的类型
	    exts: '#(SiteInfo.fileSuffix??)', //允许的文件扩展名，使用siteInfo中的变量
	    size: #(SiteInfo.fileMaxSize.toInt()*1024), //允许的大小，单位KB，使用siteInfo中的变量
	    done: function(res, index, upload){//上传接口请求成功的回调
	    	if('ok'==res.state){//后台返回成功
	    		layer.msg(res.msg);
	    		$("#files-item").removeClass("layui-hide");
	    		$("#files-input").append("<input type='checkbox' name='files' value='"+res.fileId+"' title='"+res.fileName+"' checked>");
	    		form.render("checkbox");
	    	} else {//后台返回失败
	    		layer.msg(res.msg);
	    	}
	    },
	    error: function(index, upload){//上传请求失败的回调
	    	layer.msg("文件上传失败");
	    }
	});
	
	//图片上传处理
	upload.render({
	    elem: '#uploadPic', //绑定元素
	    url: '/file/uploadImgs', //上传接口
	    data: {type: 'artPic'},//其他额外参数，此处是文章图片
	    accept: 'images', //接受上传的类型
	    size: #(SiteInfo.imgMaxSize.toInt()*1024), //允许的大小，单位KB，使用siteInfo中的变量
	    multiple: true,
	    done: function(res, index, upload){//上传接口请求成功的回调
	    	if('ok'==res.state){//后台返回成功
	    		layer.msg(res.msg);
	    		$("#files-item").removeClass("layui-hide");
    			$("#files-input").append("<input type='checkbox' name='files' value='"+res.fileId+"' title='"+res.fileName+"' checked>");
	    		$("#files-input").append("<a href='javascript:;' onclick='viewImg("+res.fileId+")' class='layui-btn layui-btn-sm'>预览</a> ");
    			form.render("checkbox");
	    	} else {//后台返回失败
	    		layer.msg(res.msg);
	    	}
	    },
	    error: function(index, upload){//上传请求失败的回调
	    	layer.msg("文件上传失败");
	    }
	});
</script>

#end